<!DOCTYPE html>
<html lang="en">
    <html lang="zh">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS -->
   <link rel="stylesheet" href="style.css">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>Title</title>
</head>

<body>
    <input type="checkbox" class="checkall" >
    <input type="checkbox" class="j-checkbox">
    <input type="checkbox" class="j-checkbox">
    <input type="checkbox" class="j-checkbox">

    <script>
        // $(function () {
        //     // 使用更具体的id选择器代替类名选择器，提高选择器的效率
        //     $("#checkall").on('change', function() {
        //         // 获取当前复选框的选中状态
        //         let isChecked = $(this).is(':checked');
        //         // 仅当状态改变时才进行操作，提高性能
        //         if ($(this).data('prevState') !== isChecked) {
        //             $(".j-checkbox").prop("checked", isChecked);
        //             // 更新数据.
            
        //         }
        //     });
        // });
        // //
//         $(".checkall").change(function () {
// $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
//         }
// )
$(".j-checkbox").change(function () {
    if($(".j-checkbox:checked").length===$(".j-checkbox").length){
    $(".checkall").prop("checked",true);
}
else{
    $(".checkall").prop("checked",false);
}}
//所有小复选框的个数


    </script>
    
</body>
</html>